<template>
  <div class="main-container">
      <router-view></router-view>
  </div>
</template>
<script setup lang="ts">
</script>

<style  scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background-color: red;
}
/* 媒体查询：针对小屏幕设备 */
@media (max-width: 768px) {
  .app-container {
    padding: 10px; /* 调整内边距 */
    font-size: 14px; /* 调整字体大小 */
  }
}

/* 媒体查询：针对大屏幕设备 */
@media (min-width: 769px) {
  .app-container {
    padding: 20px; /* 调整内边距 */
    font-size: 16px; /* 调整字体大小 */
  }
}
</style>
